<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"      
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:ic="http://ivyteam.ch/jsf/component"
      xmlns:p="http://primefaces.org/ui"
      xmlns:pe="http://primefaces.org/ui/extensions"
      xmlns:pm="http://primefaces.org/mobile">
 
    <h:head>
        <title>Login Form</title>
        <style>
        	.panelGroup{
        		border: 0px;
        		padding: 1px;
        		margin: 1px;
        	}
        	.successMessage{
        		font-weight: bolder;
        		color: green;
        	}
        	.failMessage{
        		font-weight: bolder;
        		color: red;
        	}
        	.secondaryBtn{
        		color: grey;
        	}
        </style>
        <script>
        	function closeForm(){
        		$('#userNameTxt').val("");
        		$('#passWordTxt').val("");
        	}
        </script>
    </h:head>
    <h:body>
    	<center>
        <h2>Welcome to Xpert.ivy</h2>
		<h:form id="loginForm" prependId="false">
        	<p:panelGrid styleClass="panelGroup" id="loginPnl"
				style="border: 0px; height:235px;">
	        	<p:row>
	        		<p:column>
	        			<h:outputLabel value="User Name: " for="userNameTxt"></h:outputLabel>
	        		</p:column>
	        		<p:column>
	        			<p:inputText id="userNameTxt" value="#{data.username}"></p:inputText>
	        		</p:column>
	        	</p:row>
	        	<p:row>
	        		<p:column>
	        			 <h:outputLabel value="Password: " for="passWordTxt"></h:outputLabel>
	        		</p:column>
	        		<p:column>
	        			 <p:password id="passWordTxt" value="#{data.password}"/>
	        		</p:column>
	        	</p:row>
	        	<p:row>
	        		<p:column colspan="2">
	        			<h:outputText class="successMessage" value="#{data.message}" rendered="#{data.isLoginSuccessful == true}"></h:outputText>
	        			<h:outputText class="failMessage" value="#{data.message}" rendered="#{data.isLoginSuccessful == false}"></h:outputText>
	        		</p:column>
        		</p:row>
	           	<p:row>
	        		<p:column colspan="2">
	        			 <p:commandButton id="submitBnt" value="Login" 
	            				 actionListener="#{logic.login}"
	            				 update="loginForm"/>
	           			 <p:commandButton id="cancelBnt" value="Cancel"
	           			 		 onclick="closeForm()" process="@none" update="@none"/>
	        		</p:column>
	        	</p:row>
			</p:panelGrid>
        </h:form> 
        </center>   	
    </h:body>
</html>